<template>
	<view>
		<u-navbar :bgColor="navbar.bgColor">
			<view slot="left">
				<text class="navbar-title">{{navbar.appName}}</text>
			</view>
		</u-navbar>
		
		<view class="banner-box">
			<u-swiper
					:list="bannerList"
					keyName="image"
					indicator
					circular
			></u-swiper>
		</view>
		
		<view class="gird-box">
			<u-grid :col="4" :border="false">
				<u-grid-item bgColor="rgba(0,0,0,0)" @click="$u.route(item.path)"
					v-for="(item,index) in menuList" :key="index">
					<u-image width="80rpx" height="80rpx" :src="item.image"></u-image>
					<view class="grid-text">{{item.name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<u-sticky :offset-top="offsetTop">
			<view style="background-color: #F8F8F8;">
				<!-- 标题栏 -->
				<HeadCell :leftShow="false" :tabs="opentop?tabs:tabs1" :rightShow="false" 
						@tabChange="tabChange">
				</HeadCell>
			</view>
		</u-sticky>
		
		<block v-if="opentop">
			<block v-if="tabCurrent==0">
				<view class="info-margin">
					<!-- 招聘信息列表 -->
					<JobList :JobData="JobData"></JobList>
					<view style="background-color: white;" v-if="JobData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==1">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseRentData"></HouseList>
					<view style="background-color: white;" v-if="houseRentData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==2">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseSellData"></HouseList>
					<view style="background-color: white;" v-if="houseSellData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
		</block>
		<block v-else>
			<block v-if="tabCurrent==0">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseRentData"></HouseList>
					<view style="background-color: white;" v-if="houseRentData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
			<block v-if="tabCurrent==1">
				<view class="info-margin">
					<!-- 房源信息列表 -->
					<HouseList :houseData="houseSellData"></HouseList>
					<view style="background-color: white;" v-if="houseSellData.length==0">
						<u-empty text="暂无数据" mode="list"></u-empty>
					</view>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbar: {
					bgColor: '#f44c01',
					appName: 'WHCity',
				},
				
				bannerList: [
					{
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					},
					{
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					}
				],
				
				menuList: [
					{
						name: '招聘求职',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png',
						path: '/pages/search/search'
					},
					{
						name: '房屋出租',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png',
						path: '/pages/search/search'
					},
					{
						name: '二手市场',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png',
						path: '/pages/search/search'
					},
					{
						name: '其他1',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png',
						path: '/pages/search/search'
					},
					{
						name: '其他2',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png',
						path: '/pages/search/search'
					},
					{
						name: '其他3',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png',
						path: '/pages/search/search'
					},
					{
						name: '其他4',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png',
						path: '/pages/search/search'
					}
				],
				
				offsetTop: 0,
				opentop: true,
				tabCurrent: 0,
				tabs: [{
					name: '好工作'
				}, {
					name: '好房出租'
				}, {
					name: '好房出售'
				}],
				
				JobData: [],
			}
		},
		onLoad() {

		},
		methods: {
			tabChange(index) {
				console.log('index:', index)
				this.tabCurrent = index;
				switch (index) {
					case 0:
						this.getJobList();
						break;
					case 1:
						// this.getHouseRentList();
						break;
					case 2:
						// this.getHouseSellList();
						break;
				}
			},
			getJobList() {
				this.JobData = [
					{
						id: '1',
						is_top: '2',
						title: '招聘java工程师，996，1800一个月',
						is_face: '0', salary_min: 4000, salary_max: 10000,
						work_exp_text: '工作描述',
						edu_text: '教育描述',
						createtime_text: '2023/10/11',
						labelconfif: ['工程师', '能加班'],
						work_address: '工作地址',
					}
				]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-title {
		margin: 0 20rpx;
		font-size: 35rpx;
		color: white;
	}

	.banner-box {
		// 状态栏20px，navbar高44px
		margin-top: 64px;
	}
	
	.gird-box {
		margin: 0 20rpx;
		background-color: white;
		border-radius: 20rpx;
	}
</style>
